<template>
  <!-- 添加银行卡 -->
  <view class="container">
    <u-toast ref="uToast"></u-toast>
    <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange" change-text="X秒后重发"
      end-text="重新获取验证码"></u-verification-code>
    <!-- 第一步 -->
    <view v-if="!notCertified">
      <view class="titlea">
        完善信息
      </view>
      <view class="font-28 color-999 mt-10">
        请绑定持卡人本人的银行卡
      </view>
      <!--certified false未认证隐藏持卡人，true认证显示持卡人 -->
      <view class="carboxs flex mt-90" v-show="certified">
        <view class="font-30 color-333 flex flex-ai-c">
          持 卡 人
        </view>
        <view class="inpust flex">
          <input class="inpucars" type="text" placeholder="请输入姓名" disabled="disabled" v-model="names" />
          <i-icon icon="icongantanhao" type="single" size="44rpx" color="#FBD220" @click.native="showpeoplebtn()"></i-icon>
        </view>
      </view>
      <view class="carboxs flex mt-90">
        <view class="font-30 color-333 flex flex-ai-c">
          银行卡号
        </view>
        <view class="inpust flex flex-ai-c">
					<!-- <u-input class="inpucars" type="number" placeholder="请输入本人银行卡号" v-model="bankcard" maxlength="19" @input="formatCardNumber"></u-input> -->
          <input class="inpucars" @focus="isDel = true" type="number" placeholder="请输入本人银行卡号" v-model="bankcard" maxlength="19"/>
					<view v-show='bankcard&&isDel' @click="del" style="margin-right: 20rpx;"><u-icon name="close-circle" size="40" color="#999999"></u-icon></view>
          <view @click="bankcamera()">
            <i-icon icon="iconzhaoxiangji" type="single" size="48rpx" color="#666666"></i-icon>
          </view>
        </view>
      </view>
      <view class="tits">
        个人信息加密保护中
      </view>
      <view class="btnbox">
        <view class="btnc" v-if="bankcard" @click="nextstep()">
          下一步
        </view>
        <view class="btnh" v-else>
          下一步
        </view>
      </view>
    </view>
    <!-- 第二步 -->
    <view v-if="notCertified">
      <view class="titlea">
        完善信息
      </view>
      <!--certified false未认证隐藏持卡人，true认证显示持卡人 -->
      <view class="carboxs flex mt-90" v-show="certified">
        <view class="font-30 color-333">
          持 卡 人
        </view>
        <view class="inpust flex">
          <input class="inpucars" type="text" placeholder="请输入姓名" disabled="disabled" v-model="names" />
          <i-icon icon="icongantanhao" type="single" size="44rpx" color="#FBD220" @click.native="showpeoplebtn()"></i-icon>
        </view>
      </view>
      <view class="carboxs flex mt-45" v-show="certified">
        <view class="font-30 color-333">
          银行卡号
        </view>
        <view class="inpust flex">
          <input class="inpucars" type="text" placeholder="请输入银行卡号" disabled="disabled" v-model="bankcard" />
          <!-- <i-icon icon="icongantanhao" type="single" size="44rpx" color="#FBD220"></i-icon> -->
        </view>
      </view>
      <view class="carboxs flex mt-45" v-show="!certified">
        <view class="font-30 color-333">
          真实姓名
        </view>
        <view class="inpust flex">
          <input class="inpucars" type="text" placeholder="请输入姓名" v-model="realname" />
          <i-icon icon="iconchacha" type="single" size="44rpx" color="#D3D3D3"></i-icon>
        </view>
      </view>
      <view class="carboxs flex  mt-45" v-show="!certified">
        <view class="font-30 color-333">
          身份证号
        </view>
        <view class="inpust flex">
          <input class="inpucars" type="text" placeholder="请输入身份证号" v-model="idnumber" />
          <i-icon icon="iconchacha" type="single" size="44rpx" color="#D3D3D3"></i-icon>
        </view>
      </view>
			<view class="carboxs flex  mt-45">
				<view class="font-30 color-333">
				  所属类型
				</view>
				<view class="inpust flex">
					<view class="carimgs">
					  <image :src="cardType.logo" mode="heightFix"></image>
					</view>
					<view class="ml-20">
					  {{cardType.bankName}}{{cardType.bankCardType}}
					</view>
				</view>
			  
			</view>
      <!-- <view class="carboxs flex  mt-45">
        <view class="font-30 color-333">
          手机号码
        </view>
        <view class="inpust flex">
          <input class="inpucars" type="text" placeholder="请输入手机号码" v-model="phonenumber" maxlength="11" />
          <i-icon icon="iconchacha" class="mr-20" type="single" size="44rpx" color="#D3D3D3" @click.native="deletephoneclick()"></i-icon>
          <i-icon icon="icongantanhao" type="single" size="44rpx" color="#FBD220" @click.native="showmobile = true"></i-icon>
        </view>
      </view> -->
      <!-- <view v-if="phonenumber">
        <view class="tits">
          查看<text @click.native="showbussins = true">《服务协议》</text>
        </view>
        <view class="btnbox" @click="agreeConsent()">
          <view class="btnc">
            
						下一步
          </view>
        </view>
      </view> -->
      <view>
        <view class="tits">
          个人信息加密保护中
        </view>
        <view class="btnbox" @click="comfig">
          <view class="btnc">
            提交
          </view>
        </view>
      </view>
    </view>
    <!-- 持卡人弹窗 -->
    <u-popup v-model="showpeople" mode="center" border-radius="14" width="600rpx">
      <view class="popup-title">实名认证后只可绑定本人银行卡</view>
      <view class="popup-contents">姓名：{{names}}<br>证件号码：{{idCardNos}}</view>
      <view class="btnWrap flex flex-jc-c">
        <view class="left" @click="showpeople = false">
          <view class="inline-block">知道了</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script src="./addBankCard.js"></script>
<style src="./addBankCard.scss" lang="scss" scoped></style>
